<template>
	<view style="width: 100%; height: 550rpx">
		<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
		<!-- :canvas2d="true" :canvasId="canvasId" -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				chartData: {},
				pieData:[],
				opts: {
					color: ["#5c26e9", "#61c378"],
					fontColor: "#666", // 全局默认字体颜色，16进制颜色格式
					padding: [5, 5, 5, 5],
					rotate: false, //横屏模式
					animation: true, // 是否动画展示图表
					dataLabel: true, // 是否显示图表区域内数据点上方的数据文案

					legend: {
						radius: ['40%', '70%'],
						show: true,
						position: "bottom", //图例相对画布的显示位置，可选值：'bottom','top','left','right'
						float: "top", // 图例位置对齐方向，可选值：'center','left','right','top','bottom'
						padding: 5, //图例内填充边距
						margin: 5, // 图例外侧填充边距 
						backgroundColor: "rgba(0,0,0,0)", // 图例背景颜色
						borderColor: "rgba(0,0,0,0)", // 图例边框颜色
						borderWidth: 0, // 图例边框线宽
						fontSize: 13, // 字体大小
						fontColor: "#333", // 字体颜色
						lineHeight: 11, // 字体行高
						hiddenColor: "#CECECE", // 点击隐藏时图例标识及文字颜色
						itemGap: 20, // 各个分类（类别）之间的间隔
					},
					
					extra: {
						pie: {
							activeOpacity: 0.5, // 启用Tooltip点击时，突出部分的透明度
							activeRadius: 10, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
							offsetAngle: 0, // 起始角度偏移度数，顺时针方向，起点为3点钟位置为0度（比如要设置起点为12点钟位置，即逆时针偏移90度，传入-90即可）
							// customRadius: 0, // 自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
							labelWidth: 10, // 数据标签到饼图外圆连线的长度
							border: false, // 是否绘制各类别中间的分割线
							borderWidth: 0, // 分割线的宽度
							borderColor: "#fff", // 分割线的颜色
							linearType: "none", // 渐变类型，可选值："none"关闭渐变,"custom"开启渐变
							// customColor: [], //自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
						},
					},
					touchRing(e) {
						canvasRing.showToolTip(e, {
							format: function(item) {
								console.log(item,'12011111111111111111111111111111111111111');
								return item.name + ':' + item.data
							}
						});
					},
				},
			};
		},
		// props: {
		// 	pieData: {
		// 		type: Array,
		// 		default: () => [{
		// 				name: "Pending TP",
		// 				value: 35,
		// 				labelText:`Inforce TP ${35}`
		// 			},
		// 			{
		// 				name: "Inforce TP",
		// 				value: 65,
		// 				labelText:`Inforce TP ${65}`
		// 			}
		// 		],
		// 	},
		// },
		// watch: {
		// 	pieData: {
		// 		handler() {
		// 			this.setChartData();
		// 		},
		// 		immediate: true,
		// 	},
		// },
		methods: {
			// 设置数据 渲染图表
			setChartData() {
				this.chartData = {
					series: [{
						data: this.pieData,
					}, ],
				};
			},
		},
	};
</script>